<template>
	<NavBar :obj="{ title: '确认订单', backgroundColor: 'transparent', color: '#000000' }" :scrollTop="scrollTop" />

	<view class="container m-30">
		<view class="address flex items-center justify-between" @click="goUrl('/pages/address/index?choose=1')">
			<view class="flex-1">
				<view class="null-address" v-if="!info.address">请选择收货地址</view>
				<view v-else>
					<view class="province flex items-center">
						<image src="/static/order/ic_qrdddiz@2x.png" class="icon"></image>
						<view class="val">{{ info.address?.address }}</view>
					</view>
					<view class="details line-2-clamp">{{ info.address?.details }}</view>
					<view class="nickname flex items-center">
						<view class="val">{{ info.address?.nickname }}</view>
						<view class="mobile">{{ info.address?.tel }}</view>
					</view>
				</view>
			</view>
			<view class="right-icon">
				<up-icon name="arrow-right" />
			</view>
		</view>

		<view class="product">
			<view class="item flex" v-for="(item, index) in info.product" :key="index">
				<image :src="imgUrl + item.icon" class="icon"></image>
				<view class="info flex flex-col justify-between flex-1">
					<view class="top">
						<view class="title line-1-clamp">{{ item.title }}</view>
						<view class="spec">{{ item.spec }}</view>
					</view>
					<view class="bom flex items-center justify-between">
						<view class="price rmb flex items-center">
							<text>{{ item.vip_price }}</text>
						</view>
						<view class="num">x {{ item.num }}</view>
					</view>
				</view>
			</view>

			<view class="remarks flex items-center justify-between" @click="showRemarks = true">
				<view class="ts flex-1 flex items-center justify-between">
					<view class="left">订单备注</view>
					<view class="right" :class="{ black: submitRef.remark }">{{ submitRef.remark ? submitRef.remark : '无备注' }}</view>
				</view>
				<up-icon name="arrow-right" class="icon" />
			</view>
		</view>

		<view class="total">
			<view class="ts flex-1 flex items-center justify-between">
				<view class="left">商品金额</view>
				<view class="right rmb rmb-b">{{ info.real_amount }}</view>
			</view>
			<!-- <view class="ts flex-1 flex items-center justify-between">
				<view class="left">运费</view>
				<view class="right rmb rmb-b">{{ info.total?.freightTotal }}</view>
			</view> -->
			<view class="total-amount flex items-center justify-end">
				<view class="text">合计：</view>
				<view class="val rmb">{{ info.real_amount }}</view>
			</view>
		</view>
	</view>

	<up-popup v-model:show="showRemarks" :round="10" position="bottom" closeable :customStyle="{ padding: '30rpx' }">
		<view class="remarks-popup">
			<view class="title">订单备注</view>
			<textarea placeholder="选填，请输入您的备注" class="textarea" v-model="submitRef.remark"></textarea>
			<view class="theme-btn" @click="showRemarks = false">确定</view>
		</view>
	</up-popup>

	<view class="footer flex items-center justify-between">
		<view class="left flex items-center">
			<view class="text">实付：</view>
			<view class="val rmb">{{ info.real_amount }}</view>
		</view>
		<view class="btn" @click="orderSubmit">立即支付</view>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { onShow, onPageScroll } from '@dcloudio/uni-app';
	import { port, imgUrl, goUrl, hint, goBack, goIndex,loading, closeLoading } from '/service/port';

	const showRemarks = ref(false);
	const curr = ref(0);
	const submitRef = ref({
		remark: '',
		address_id: ''
	});

	const info = ref('');

	onShow(() => {
		getOrderTemporary();
	});

	async function orderSubmit() {
		if (!submitRef.value.address_id) {
			hint('请选择收货地址');
			return false;
		}

		loading();
		let res = await port('orderSubmit', submitRef.value);
		setTimeout(() => {
			closeLoading();
			goIndex('/pages/order/payment?id=' + res.data.order_id);
		}, 300);
	}

	async function getOrderTemporary() {
		let res = await port('getOrderTemporary');
		info.value = res.data;
		if (res.data.address) {
			submitRef.value.address_id = res.data.address.id;
		}
		const chooseAddress = uni.getStorageSync('chooseAddress');
		if (chooseAddress) {
			info.value.address = chooseAddress;
			submitRef.value.address_id = chooseAddress.id;
			uni.removeStorageSync('chooseAddress');
		}
	}

	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}
	.black {
		color: #000 !important;
	}
	.ts {
		.left {
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
		}
		.right {
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
		}
	}
	.rmb::before {
		font-size: 26rpx;
	}
	.rmb-b::before {
		color: #000;
		font-size: 24rpx;
	}

	.remarks-popup {
		.title {
			font-weight: 500;
			font-size: 34rpx;
			color: #000000;
			text-align: center;
		}
		.textarea {
			box-sizing: border-box;
			width: 100%;
			margin: 34rpx 0 60rpx 0;
			background: #f4f5f8;
			border-radius: 20rpx;
			padding: 26rpx;
		}
		.theme-btn {
			padding: 22rpx 0;
			background: linear-gradient(-90deg, #f81a2e 0%, #fc4856 100%);
			border-radius: 41rpx;
		}
	}

	.product_total {
		padding: 28rpx 0;
		.text {
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			margin-top: 5rpx;
		}
		.val {
			color: #f81a2e;
			font-weight: 400;
			font-size: 32rpx;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background: #ffffff;
		box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
		padding: 20rpx 30rpx;
		.left {
			.text {
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
			}
			.val {
				font-weight: 400;
				font-size: 36rpx;
				color: #fb3204;
			}
		}
		.btn {
			background: $theme-bg-btn-color;
			border-radius: 36rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
			padding: 15rpx 50rpx;
		}
	}

	.container {
		padding-bottom: 150rpx;
		.address {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 25rpx;

			.null-address {
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				padding: 20rpx 0;
			}

			.province {
				.val {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					margin-left: 14rpx;
				}
				.icon {
					width: 27rpx;
					height: 27rpx;
				}
			}
			.details {
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				margin: 18rpx 0;
			}
			.nickname {
				.val {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}
				.mobile {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					margin-left: 31rpx;
					margin-top: 5rpx;
				}
			}
			.right-icon {
				margin-left: 100rpx;
			}
		}

		.product {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 0 24rpx;
			margin-top: 24rpx;
			.business {
				padding-top: 24rpx;
				margin-bottom: 10rpx;
				> image {
					width: 36rpx;
					height: 36rpx;
					border-radius: 6rpx;
				}
				> view {
					font-weight: 500;
					font-size: 26rpx;
					color: #000000;
					margin-left: 10rpx;
				}
			}
			.item {
				padding: 24rpx 0;
				border-bottom: 1rpx solid #eeeeee;
				&:last-child {
					border-bottom: none;
				}
				.icon {
					width: 142rpx;
					height: 142rpx;
					border-radius: 10rpx;
				}
				.info {
					margin-left: 23rpx;
					.top {
						.title {
							font-weight: 400;
							font-size: 26rpx;
							color: #000000;
						}
						.spec {
							font-weight: 400;
							font-size: 22rpx;
							color: #999999;
							margin-top: 15rpx;
						}
					}
					.bom {
						.price {
							font-weight: 500;
							font-size: 32rpx;
							color: #fb3204;
						}
						.num {
							font-weight: 400;
							font-size: 22rpx;
							color: #999999;
						}
						.tips {
							background: linear-gradient(0deg, #f81a2e 0%, #fc4856 100%);
							border-radius: 12rpx 15rpx 15rpx 0rpx;
							font-weight: 400;
							font-size: 22rpx;
							color: #ffffff;
							line-height: 42rpx;
							padding: 0 10rpx;
							height: 30rpx;
							line-height: 30rpx;
							text-align: center;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		.remarks {
			background: #ffffff;

			padding: 30rpx 0;
			// margin-top: 24rpx;
			// border-bottom: 1rpx solid #eeeeee;
			.icon {
				margin-left: 19rpx;
			}
		}

		.total {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx 24rpx;
			margin-top: 24rpx;
			.ts {
				margin-bottom: 30rpx;
				&:last-child {
					margin-bottom: 0;
					padding-bottom: 30rpx;
				}
				.right {
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
				}
			}

			.total-amount {
				border-top: 1rpx solid #eeeeee;
				padding-top: 26rpx;
				.text {
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					margin-top: 5rpx;
				}
				.val {
					font-size: 34rpx;
					color: #fb3204;
				}
			}
		}
	}
</style>
